@extends('admin.layout')

@section('content')

<body>
<div class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加内容</strong></div>
    <div class="body-content">
        <form id="form" method="post" class="form-x" action="{{ url('admin/article/'.$article['id']) }}">
            {{ csrf_field() }}  
            {{ method_field('put') }}
            <div class="form-group">
                <div class="label">
                    <label>文章标题：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="{{ $article['title'] }}" name="title"  />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>关键字标题：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="keywords" value="{{ $article['keywords'] }}" />
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>作者：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="author" value="{{ $article['author'] }}"  />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>图片：</label>
                </div>
                <div class="field">
                    <!--dom结构部分-->
                    <div id="uploader-demo">
                        <!--用来存放item-->
                        <div id="fileList" class="uploader-list"></div>
                        <div id="filePicker">选择图片</div>
                        <img id="img" style="width:500px;height:400px" src="/{{ $article['img_url'] }}" />
                        <input id="input" type="hidden" name="img_url" value="{{ $article['img_url'] }}" />   
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>分类标题：</label>
                </div>
                <div class="field">
                    <select name="cate_id" class="input w50">
                        <!-- <option value="">请选择分类</option> -->
                        @foreach($cates as $cate)
                        <option value="{{ $cate['id'] }}" {{ $cate['id'] == $article['cate_id'] ? 'selected' : '' }}>{{ $cate['cate_name'] }}</option>
                        @endforeach
                    </select>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>文章描述：</label>
                </div>
                <div class="field">
                    <textarea class="input" name="desc" style=" height:90px;">{{ $article['desc'] }}</textarea>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>文章内容：</label>
                </div>
                <div class="field">
                    <script id="container" name="content" type="text/plain">{!!$article['content']!!}</script>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

</body>
<script>
    // 初始化Web Uploader
    var uploader = WebUploader.create({

    // 选完文件后，是否自动上传。
    auto: true,

    // swf文件路径
    swf: "{{ asset('lib/webuploader/Uploader.swf') }}",

    // 文件接收服务端。
    server: "{{ url('admin/upload') }}",

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#filePicker',

    // 只允许选择图片文件。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file , res ) {
        //实时显示图片        
        $('#img').attr('src','/'+res.url);
        
        $('#input').attr('value',res.url);
    });

    //ajax表单验证
    $('#form').Validform({
        tiptype:4,
        ajaxPost:true,
        callback:function(res) {
            if (res.status == 'success') {
                location.href = "{{ url('admin/article') }}";
            } else {
                layer.msg(res.msg,{icon:2});
            }
        }

    });

    // 实例化编辑器 (富文本编辑器UEditor)
    var ue = UE.getEditor('container',{ 
        toolbars: [
        [
            'anchor', //锚点
            'undo', //撤销
            'redo', //重做
            'bold', //加粗
            'indent', //首行缩进
            'snapscreen', //截图
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            // 'fontborder', //字符边框
            // 'superscript', //上标
            // 'formatmatch', //格式刷
            // 'source', //源代码
            // 'blockquote', //引用
            // 'pasteplain', //纯文本粘贴模式
            // 'selectall', //全选
            // 'print', //打印
            // 'preview', //预览
            'horizontal', //分隔线
            // 'removeformat', //清除格式
            // 'time', //时间
            // 'date', //日期
            // 'unlink', //取消链接
            'insertrow', //前插入行
            'insertcol', //前插入列
            'mergeright', //右合并单元格
            'mergedown', //下合并单元格
            'deleterow', //删除行
            'deletecol', //删除列
            'splittorows', //拆分成行
            'splittocols', //拆分成列
            'splittocells', //完全拆分单元格
            'deletecaption', //删除表格标题
            'inserttitle', //插入标题
            'mergecells', //合并多个单元格
            'deletetable', //删除表格
            // 'cleardoc', //清空文档
            // 'insertparagraphbeforetable', //"表格前插入行"
            // 'insertcode', //代码语言
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            'simpleupload', //单图上传
            'insertimage', //多图上传
            'edittable', //表格属性
            'edittd', //单元格属性
            'link', //超链接
            'emotion', //表情
            'spechars', //特殊字符
            'searchreplace', //查询替换
            'map', //Baidu地图
            'gmap', //Google地图
            'insertvideo', //视频
            'help', //帮助
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'backcolor', //背景色
            // 'insertorderedlist', //有序列表
            // 'insertunorderedlist', //无序列表
            'fullscreen', //全屏
            // 'directionalityltr', //从左向右输入
            // 'directionalityrtl', //从右向左输入
            // 'rowspacingtop', //段前距
            // 'rowspacingbottom', //段后距
            // 'pagebreak', //分页
            // 'insertframe', //插入Iframe
            // 'imagenone', //默认
            // 'imageleft', //左浮动
            // 'imageright', //右浮动
            // 'attachment', //附件
            // 'imagecenter', //居中
            // 'wordimage', //图片转存
            // 'lineheight', //行间距
            // 'edittip ', //编辑提示
            // 'customstyle', //自定义标题
            // 'autotypeset', //自动排版
            // 'webapp', //百度应用
            // 'touppercase', //字母大写
            // 'tolowercase', //字母小写
            // 'background', //背景
            // 'template', //模板
            // 'scrawl', //涂鸦
            // 'music', //音乐
            // 'inserttable', //插入表格
            // 'drafts', // 从草稿箱加载
            // 'charts', // 图表
            ]
        ],
            initialFrameWidth: null , 
            autoHeightEnabled: true , 
            initialFrameHeight:400
    });
    ue.ready(function(){ ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); }); 
</script>
@endsection